<template>
	<view>
		<u-popup :show="popupShow">
			<view class="ku_filter_popup_content">
				<view class="ku_picker_header">
					<view class="ku_picker_button" @click="cancelPicker">
						取消
					</view>
					<u-search :showAction="true" actionText="搜索" :animation="true" :clearabled="true"
						v-model="searchContent" @search='confirmSearch' @custom='confirmSearch'
						@clear='clearSearch'></u-search>
					<view class="ku_picker_button ku-text-color-primary" @click="confirmPicker">
						确定
					</view>
				</view>
				<picker-view v-if="pickerShow" :value="pickerDefaultValue" @change="bindPickerChange"
					class="ku_picker_body">
					<picker-view-column>
						<view class="ku_picker_item" v-for="(item,index) in pickerColumns" :key="index">
							{{item[pickerShowKey]}}
						</view>
					</picker-view-column>
				</picker-view>
				<view class="ku-margin-top-20" v-else>
					<u-empty mode="data" text='请输先搜索'>
					</u-empty>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				popupShow: false, // 弹出框显示状态
				searchContent: '', // 搜索内容
				pickerShow: false, // 无搜索内容的不显示下拉选项
				pickerShowKey: '',
				pickerDefaultValue: [0], // 默认选中的值
				pickerSelectValue: '', // 当前选中的值

				pickerColumns: [],

			}
		},
		methods: {
			// 组件初始化
			componentInit(OptionColumns, keyName) {
				this.pickerColumns = OptionColumns;
				console.log('搜索筛选选择组件----componentInit---->', this.pickerColumns);
				this.pickerShowKey = keyName;
				console.log('搜索筛选选择组件----componentInit---->', this.pickerDefaultValue);
				this.$nextTick(() => {
					this.popupShow = true;
				})

			},
			// 绑定选中事件
			bindPickerChange(e) {
				console.log('绑定选中事件----bindPickerChange---e->', e)
				const resData = e.detail.value;
				this.pickerSelectValue = e.detail.value;
				console.log('绑定选中事件----bindPickerChange-- resData -->', resData)
			},
			// 确认搜索
			confirmSearch(value) {
				console.log('确认搜索--- confirmSearch --->', value);
				// 判断内容是否为空 如果为空则不执行搜索
				if (value.length !== 0) {
					this.pickerShow = true;
					this.$emit('confirmSearch', value);
				}

			},
			// 用户清除了数据
			clearSearch() {
				this.pickerShow = false;

			},
			// 点击确定选择
			confirmPicker() {
				console.log('点击确定选择--- confirmPicker --->', this.pickerSelectValue);
				let pickerSelectCallback = '';
				if (this.pickerSelectValue.length > 0) {
					pickerSelectCallback = this.pickerColumns[this.pickerSelectValue[0]]
				} else {
					pickerSelectCallback = this.pickerColumns[this.pickerDefaultValue[0]]
				}
				// 如果搜索了，则给返回值，否则不给返回
				if (this.pickerShow) {
					this.$emit('confirmPicker', pickerSelectCallback)
					this.popupShow = false;
				}else{
					uni.showToast({
						title: "请搜索后选择，确认。",
						icon: "none",
						duration: 2000,
					});
				}
			},
			// 点击取消
			cancelPicker() {
				console.log('点击取消--- cancelPicker --->', )
				this.popupShow = false;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.ku_filter_popup_content {
		min-height: 740rpx;
		padding: 15px 0;
		overflow: hidden;
	}

	.ku_picker_header {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.ku_picker_button {
			padding: 0px 15px;
		}
	}

	.ku_picker_body {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
	}

	.ku_picker_item {
		line-height: 100rpx;
		text-align: center;
	}
</style>